<!-- 订单设置 -->
<template>
  <div class="container">
    <div class="order_detail">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" style="padding-left: 10%" v-loading="loading">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-card style="margin-top: 40px; min-height: 460px" shadow="never" :body-style="{ padding: '20px' }">
              <template #header>
                <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="" />
                <span>订单设置</span>
              </template>
              <el-descriptions class="mt20" :column="1" :size="size" border labelClassName="des-title" content-class-name="my-content">
                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    秒杀订单超过
                    <el-tooltip class="box-item" effect="dark" content="秒杀订单超过" placement="top-start">
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <div class="flex-center">
                    <el-input style="width: 200px; margin-right: 10px" v-model="form.falshTimeout" placeholder="秒杀订单超过">
                      <template #append>秒</template>
                    </el-input>
                    <span>未付款，订单自动关闭</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    正常订单超过
                    <el-tooltip class="box-item" effect="dark" content="正常订单超过" placement="top-start">
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <div class="flex-center">
                    <el-input style="width: 200px; margin-right: 10px" v-model="form.normalTimeout" placeholder="正常订单超过">
                      <template #append>分</template>
                    </el-input>
                    <span>未付款，订单自动关闭</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    发货超过
                    <el-tooltip class="box-item" effect="dark" content="发货超过" placement="top-start">
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <div class="flex-center">
                    <el-input style="width: 200px; margin-right: 10px" v-model="form.orderCompleted" placeholder="发货超过">
                      <template #append>天</template>
                    </el-input>
                    <span>未收货，订单自动完成</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    订单完成超过
                    <el-tooltip class="box-item" effect="dark" content="订单完成超过" placement="top-start">
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <div class="flex-center">
                    <el-input style="width: 200px; margin-right: 10px" v-model="form.afterSalesTimeout" placeholder="订单完成超过">
                      <template #append>天</template>
                    </el-input>
                    <span>自动结束交易，不能申请售后</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    订单完成超过
                    <el-tooltip class="box-item" effect="dark" content="订单完成超过" placement="top-start">
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <div class="flex-center">
                    <el-input style="width: 200px; margin-right: 10px" v-model="form.automaticEvaluate" placeholder="订单完成超过">
                      <template #append>天</template>
                    </el-input>
                    <span>自动好评</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    修改客户分类
                    <el-tooltip class="box-item" effect="dark" content="修改客户分类" placement="top-start">
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <div class="flex-center">
                    <el-radio-group v-model="form.changeSupplierClassify" class="ml-4">
                      <el-radio label="1" size="large">开启</el-radio>
                      <el-radio label="0" size="large">关闭</el-radio>
                    </el-radio-group>
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-card style="margin-top: 40px; min-height: 460px" shadow="never" :body-style="{ padding: '20px' }">
              <template #header>
                <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="" />
                <span>打印设置</span>
              </template>
              <el-descriptions class="mt20" :column="1" :size="size" border labelClassName="des-title" content-class-name="my-content">
                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    打印份数
                    <el-tooltip class="box-item" effect="dark" content="小票打印次数" placement="top-start">
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <el-input style="width: 200px" v-model="form.printNum" placeholder="订单自动打印的份数"><template #append>份</template></el-input>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    打印每次查询数
                    <el-tooltip class="box-item" effect="dark" content="打印每次查询数" placement="top-start">
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <el-input-number
                    style="width: 200px"
                    v-model="form.printPageSize"
                    maxlength="2"
                    max="99"
                    min="1"
                    placeholder="查询条数"
                  ></el-input-number>
                  <span> 最小1条最大99条</span>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    打印昵称
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="开启：打印标签机没有昵称不自动打印，但可以手动打印 ；关闭：打印标签机有没有昵称都打印"
                      placement="top-start"
                    >
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <el-radio-group v-model="form.printNickName" class="ml-4">
                    <el-radio label="1" size="large">开启</el-radio>
                    <el-radio label="0" size="large">关闭</el-radio>
                  </el-radio-group>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <el-icon>
                      <CopyDocument />
                    </el-icon>
                    打印达人昵称
                    <el-tooltip class="box-item" effect="dark" placement="top-start">
                      <template #content>
                        <div>
                          <p>
                            开启：打印标签机没有达人名称（主播昵称）不自动打印，但可以手动打印 ；<br />关闭：打印标签机有没有达人名称（主播昵称）都打印，一个店铺只有一个直播间的情况才能关闭
                          </p>
                        </div>
                      </template>
                      <el-icon>
                        <QuestionFilled />
                      </el-icon>
                    </el-tooltip>
                  </template>

                  <el-radio-group v-model="form.printAuthorName" class="ml-4">
                    <el-radio label="1" size="large">开启</el-radio>
                    <el-radio label="0" size="large">关闭</el-radio>
                  </el-radio-group>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div class="btn_bottom">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import smart from 'address-smart-parse';
import listMixin from '@/mixins/listMixin';
import request from '@/utils/request';
import orderSetting from '@/api/goods/orderSetting';
import moment from 'moment';
export default {
  name: 'orderSetting',
  dicts: [],
  components: {},
  mixins: [listMixin],
  data() {
    return {
      funcObj: orderSetting,
      form: {},
      size: 'mini',
      smart: '',
      selectedSaleOptions: [],
      urls: {
        list: '/order/orderSetting/list',
        url: '/order/orderSetting'
      }
    };
  },
  created() {
    // this.getOrderDetail();
    // this.getOrderGoods();
    // this.getOrderLog();
  },
  methods: {
    getOrderDetail() {
      this.$http.get(`/order/${this.$route.params.id}`).then((res) => {
        this.orderDetail = res.data;
      });
    },
    getOrderGoods() {
      this.$http.get(`/order/${this.$route.params.id}/goods`).then((res) => {
        this.orderGoods = res.data;
      });
    },
    getOrderLog() {
      this.orderLogLoading = true;
      this.$http
        .get(`/order/${this.$route.params.id}/log`, {
          params: {
            page: this.orderLogPage.page,
            size: this.orderLogPage.size
          }
        })
        .then((res) => {
          this.orderLog = res.data;
          this.orderLogLoading = false;
        });
    },
    handleSizeChange(val) {
      this.orderLogPage.size = val;
      this.getOrderLog();
    },
    handleCurrentChange(val) {
      console.log('666 :>> ', 666);
      this.orderLogPage.page = val;
      this.getOrderLog();
    },
    handleAdd() {
      // Add your logic here
    },
    handleTrackShow() {
      console.log('this.$refs :>> ', this.$refs);
      this.$refs.orderTracking.show();
    },
    // 修改发票信息
    editInvoice() {
      this.$refs.editInvoiceForm.show();
    },
    // 修改收货人信息
    editConsignee() {
      this.$refs.editConsigneeForm.show();
    },
    // 修改商品信息
    editMaterial() {
      this.$refs.editMaterialInfo.show();
    },
    // 修改费用信息
    editFeeInfo() {
      this.$refs.editFeeInfo.show();
    },
    // 发送站内信
    sendMessage() {
      this.$refs.sendMessageForm.show();
    },
    // 备注订单
    markOrder() {
      this.$refs.markForm.show();
    },
    parseInfo() {
      let result = smart(this.smart);
      console.log('result :>> ', result);
      // this.selectedSaleOptions = result
    },
    /**
     * @获取列表
     */
    getList() {
      this.loading = true;
      var params = {
        url: this.urls.list,
        method: 'get',
        params: this.getQueryParams() //查询条件
      };
      request(params).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.dataSource = res.rows;
          this.total = res.total;
          this.form = this.dataSource.length > 0 ? this.dataSource[0] : {};
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },

    /**
     * @提交
     * @param {*} close
     */
    submitForm(close = true) {
      this.loading = true;
      typeof this.classifyForm === 'function' && this.classifyForm();
      if (this.form.id) {
        this.funcObj
          .update(this.form)
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              this.$modal.msgSuccess('操作成功');
              if (close) {
                this.open = false;
              }
              this.$emit('ok');
            } else {
              this.$modal.msgError(res.msg);
            }
          })
          .catch((err) => {
            this.loading = false;
            console.log('err :>> ', err);
          });
      } else {
        this.funcObj
          .add(this.form)
          .then((res) => {
            this.loading = false;
            if (res.code == 200) {
              this.$modal.msgSuccess('新增成功');
              if (close) {
                this.open = false;
              }
              this.$emit('ok');
            } else {
              this.$modal.msgError(res.msg);
            }
          })
          .catch((err) => {
            console.log('err :>> ', err);
            this.loading = false;
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.order_detail {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.table_box {
  .total {
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    background-color: #f8f8f9;
  }
}

.mark {
  width: 18px;
  margin-right: 10px;
  vertical-align: bottom;
}

.mark_info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.des-title {
  text-align: right;
  padding-right: 20px;
}

.btn_bottom {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  max-width: 1560px;
  padding: 10px 10px 30px;
  background-color: #fff;
}

.smart {
  display: flex;
  align-content: center;
}

.smart-btn {
  width: 100px;
  text-align: center;
  background-color: #409eff;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.smart-btn:hover {
  background-color: #66b1ff;
}
</style>
<style type="text/css" lang="scss">
.order_detail .el-card__header {
  background-color: #f5f7fa;
  padding: 15px;
}

.order_detail .el-descriptions-item__label {
  width: 150px;
  text-align: right !important;
}

.smart-input {
  width: 80%;

  textarea {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

.my-content {
  width: 40%;
}

.flex-center {
  display: flex;
  align-items: center;
}
</style>
